<template>
    <div class='prize'>
        <div style="width:100%; height:2rem"></div>
        <div class="tiger">
            <div class="btns">
                <span>
                 <img src="http://assets.rurushishi.com/activies/bgyAct/prizeBtn1.png" alt="" v-show="isReceive">
                 <img src="http://assets.rurushishi.com/activies/bgyAct/prizeBtn2.png" alt="" @click="getVoucher">
                </span> 
                <span>
                 <img src="http://assets.rurushishi.com/activies/bgyAct/prizeBtn1.png" alt="" v-show="isPrize">
                 <img src="http://assets.rurushishi.com/activies/bgyAct/prizeBtn2.png" alt="" @click="getFare">
                </span> 
                <span>
                 <img src="http://assets.rurushishi.com/activies/bgyAct/prizeBtn1.png" alt=""  v-show="isHb">
                 <img src="http://assets.rurushishi.com/activies/bgyAct/prizeBtn2.png" alt="" @click="gethb">
                </span> 
            </div> 
            <div class="hbText" v-show="isHbtext">
                {{getStarNums}}
            </div> 
        </div> 
    
       <div class="writeinfo" v-show="prizeInfo.flag">
          <div class="writeinfo_warp">
            <div class="writeinfo_prizeinfo">
              恭喜您获得“{{prize}}”
            </div>
            <div class="writeinfo_tips">填写以下信息领取奖励！</div>
            <div class="writeinfo_name" v-show="prizeInfo.prizeType==2">
              <input v-model="userWriteForm.name" type="text" placeholder="请输入您的姓名">
            </div>
            <div class="writeinfo_mobile">
              <input v-model="userWriteForm.mobile" type="text" placeholder="请输入您的手机号" @blur="blurInput" @focus="focusClick">
            </div>
            <div class="writeinfo_code">
              <div class="left">
                <input v-model="userWriteForm.code" type="text" placeholder="请输入验证码" @blur="blurInput" @focus="focusClick">
              </div>
              <div class="right">
                <div class="writeinfo_code_btn saclebtn" @click="clickCode" v-show="!showVcode">{{VerShowTxt}}</div>
                <div class="writeinfo_code_btn saclebtn" v-show="showVcode">{{counts}}s</div>
              </div>
            </div>
            <div class="writeinfo_btns">
              <div class="writeinfo_btns_ok saclebtn" @click="clickSubmit">确定</div>
              <div class="close" @click="close">关闭</div>
            </div>
          </div>
        </div>
        <div class="return" @click="ret">
            <img src="http://assets.rurushishi.com/activies/bgyAct/return.png" alt="">
        </div>
        <Bottom :baseText="baseText"></Bottom>

    </div>
</template>
<script>
import request from "@/utils/request";
import axios from "axios";
//import { mapMutations } from "vuex";
//import wxsdk from "@/utils/wxsdk";
import {MessageBox} from "mint-ui";
import { mapState, mapMutations } from "vuex";
import wx from "weixin-js-sdk";
import * as config from "./config";
import Cookies from "js-cookie";
import Share from "@/components/common/Share";
import Bottom from "@/components/common/Bottom";
import Qs from "qs";
export default {
    data(){
        return {
            isFocus:false,
        //   isVoucher:false,
          isHbtext: false,
          isHb: false,
          getStarNums:'', //红包文案
          isPrize :false,

           prize:'购房优惠券',
            prizeInfo:{
                prizeType: 1,
                flag: false
            },
            userWriteForm:{
                name: '',
                mobile: '',
                code: ''
            },
            timer: null,
            VerShowTxt: '获取验证码',
            showVcode: false,
            counts: '',
            openid: Cookies.get("openid"),
            baseText: config.BASE_TEXT,
           isReceive: false,
        }
    },

    components: {
        Bottom
    },

    methods:{
         //返回首页
        ret(){
            // this.$router.push({path:"./index",query:{channel:this.channel,reOpenid:this.reOpenid}});
             window.location.href = location.protocol + '//' + location.host + '/act/bgyact/index?channel=' + this.channel + '&reOpenid=' + this.openid;
        },

        focusClick(e) {
                this.isFocus = true;
                if (utils.browser.versions.ios) {
                    setTimeout(function () {
                        e.target.scrollIntoView(true);
                    }, 100);
                }
        },
        blurInput(e) {
                this.isFocus = false;
                this.$nextTick(() => {
                    if (utils.browser.versions.ios && !this.isFocus) {
                        setTimeout(function () {
                            e.target.scrollIntoView(false);
                        }, 300);
                    }
                });
        },
        
        //领取话费
        getFare(){
            
        },
        //是否领取话费
        getfare(){
            let _self = this;
            let query = {
                activityId: config.ACT_CODE,
                openId: Cookies.get("openid")
            };
            axios
                .get(
                `${_self.global.API_FORUM_URL}//api/activity/getMyPrizes?${Qs.stringify(
                    query
                )}`,
                {}
                )
                .then(response => {
                console.info(response)
                if(response.code==0){
                    //领取过话费
                    if(response[1]==null){
                       //未中奖

                    }else if(response[1].flag){
                        //已领取
                        _self.isPrize = true
                    }
                }
            });
        },

            //领取红包
            gethb(){
               this.isHbtext =true
            },
         //是否领取红包
        getHb(){
            let _self = this;
            let query = {
                activityId: config.ACT_CODE,
                openId: Cookies.get("openid")
            };
            axios
                .get(
                `${_self.global.API_FORUM_URL}/api/lightenstar/selectCountAndList?${Qs.stringify(
                    query
                )}`,
                {}
                )
                .then(response => {
                console.info(response)
                if(response.code==0){
                    if(response.total<5){
                        _self.getStarNums = '还差'+(5-response.total)+'人为你点亮星星即可获得红包'
                    }
                    if(response.total>=5){
                        _self.isHb = true;
                    }
                    // //  _self.isshare = true
                    // _self.$router.push({path:"./draw",query:{channel:_self.channel,reOpenid:_self.reOpenid}});
                }
            });
        },
       

        //领取优惠券
        getVoucher(){
            let _self = this;
                    let query = {
                          activityId: config.ACT_CODE,
                          openId: Cookies.get("openid"),
                        //   name: _self.userWriteForm.name
                        };
                        axios
                            .get(
                              `${_self.global.API_FORUM_URL}/api/activity/getMobile?${Qs.stringify(
                                query
                              )}`,
                              {}
                            )
                            .then(response => {
                              if(response.code==0 && response.mobile===null){
                                  _self.prizeInfo.flag=true; 
                              }else{
                                  let query = {
                                    activityId: config.ACT_CODE,
                                    couponsId: 24,
                                    // mobile: response.mobile,
                                    openId: _self.openid
                                    //   name: _self.userWriteForm.name
                                    };
                                    axios
                                        .post(
                                        `${_self.global.API_FORUM_URL}/api/activity/getCoupons?${Qs.stringify(
                                            query
                                        )}`,
                                        {}
                                        )
                                        .then(response => {
                                        if(response.code==0){
                                            //  _self.$router.push({path:"./main",query:{channel:_self.channel}});
                                        }
                                        });

                                        }
                            });           

        },
    //点击确认 //领取优惠券
    clickSubmit(){
        let _self = this;
        if (!_self.userWriteForm.mobile) {
                    return MessageBox.alert("请输入手机号", "提示");
                } else {
                    if (!utils.isMobile(_self.userWriteForm.mobile)) {
                        return MessageBox.alert("请填写正确的手机号", "提示");
                    }
                }
                 if (!_self.userWriteForm.code) {
                    return MessageBox.alert("请输入验证码", "提示");
                }else{
                    _self.userWriteForm.code.substring(0,4) //截取前6位字符
                }
                let query = {
                          activityId: config.ACT_CODE,
                          couponsId: 24,
                          mobile: _self.userWriteForm.mobile,
                          code: _self.userWriteForm.code,
                          openId: _self.openid
                        //   name: _self.userWriteForm.name
                        };
                        axios
                            .post(
                              `${_self.global.API_FORUM_URL}/api/activity/getCoupons?${Qs.stringify(
                                query
                              )}`,
                              {}
                            )
                            .then(response => {
                              if(response.code==0){
                                //  _self.$router.push({path:"./main",query:{channel:_self.channel}});
                              }
                            });
    },
    //获取手机验证码
            getActPhoneVCode(){
                const _self = this;
                if(!_self.userWriteForm.mobile){
                        return MessageBox.alert("请输入手机号", "提示");
                    }else{
                      let query = {
                          activityId: config.ACT_CODE,
                          mobile: _self.userWriteForm.mobile
                        };
                        axios
                            .post(
                              `${_self.global.API_FORUM_URL}/api/activity/getSmsCode?${Qs.stringify(
                                query
                              )}`,
                              {}
                            )
                            .then(response => {
                              console.info(response)
                              if(response.code==0){
                                
                              }
                            });
                    };
            },

            clickCode(){
                const _self = this;
                const TIME_COUNT = 60;
                _self.getActPhoneVCode();
                if(!_self.timer&&_self.userWriteForm.mobile){
                    _self.counts = TIME_COUNT;
                    _self.showVcode = true;
                    _self.timer = setInterval(()=>{
                        if(_self.counts>0&&_self.counts<=TIME_COUNT){
                            _self.counts--;
                        }else{
                            _self.showVcode = false;
                            _self.VerShowTxt = '重新获取';
                            clearInterval(_self.timer);
                            _self.timer = null;
                        }
                    },1000)
                }
              
            },
            close() {
               this.prizeInfo.flag=false;
                // _self.$router.push({path:"./main",query:{channel:_self.channel}});
            },

    ...mapMutations({
      setInfo: "SET_INFO",
      setChannel: "SET_CHANNEL"
    })

    
  },
  computed: {
    ...mapState(["info", "channel"])
  },
  created(){
       const _self = this
          _self.global.SHARE_CALLBACK_OK = function (type) {
            //  let _self = this;
             let query = {
                activityId: config.ACT_CODE,
                // channel: 1,
                openId: Cookies.get("openid")
              };
                axios
                    .post(
                    `${_self.global.API_FORUM_URL}/api/activity/share?${Qs.stringify(
                      query
                    )}`,
                    {
                      
                    })
                    .then(response => {
                        if(response.code==0){
                          _self.isshare = false;
                        }
                         
                    });

            };
            _self.global.SHARE_TITLE = _self.info.nickname + "邀请你参加碧桂园27周年庆专属优惠 最大折合9折";
            _self.global.SHARE_LINK = location.protocol + '//' + location.host + '/act/bgyact/main?channel=' + _self.channel + '&reOpenid=' + _self.openid;
            config.initShare();
  },
  mounted(){
      this.getfare(); //是否领取话费
      this.getHb();  //是否领取红包
      this.getfare(); //是否中话费
      //是否领取过优惠券
      let _self = this;
      let query = {
                          activityId: config.ACT_CODE,
                          couponsId: 24,
                          openId: Cookies.get("openid")
                        
                        };
                        axios
                            .post(
                              `${_self.global.API_FORUM_URL}/api/activity/checkCoupons?${Qs.stringify(
                                query
                              )}`,
                              {}
                            )
                            .then(response => {
                              if(response.code==0){
                                 if(response.data==1){
                                     _self.isReceive = true;
                                 }
                              }
                            });
  }

}
</script>
<style lang = "stylus" scoped>
.prize{
    position absolute
    top 0
    left 0
    right 0
    bottom 0
    background url(http://assets.rurushishi.com/activies/bgyAct/myPrizeBg.jpg) no-repeat
    background-size 100% 100%
}
.tiger{
    position relative
    width 6.22rem
    height 8.52rem
    background url(http://assets.rurushishi.com/activies/bgyAct/prize6.png) no-repeat
    background-size 100% 100%
    margin  0 auto
}
.btns{
    position absolute
    top 4rem
    width 80%
    left 10%
    margin 0 auto
    display flex
    justify-content center
}
.btns>span{
    margin 0 .3rem
    width 1.06rem
    height .52rem
}
.btns>span>img{
    width 100%
    height 100%
}
.hbText{
    position absolute
    top 7rem
    width 80%
    left 10%
    margin 0 auto
    text-align center
    line-height .4rem
    font-size .28rem
    color #fff
}
.return{
    position absolute
    bottom: 1.2rem
    right 0
    width: .81rem
}
.return>img{
    width: 100%
    height: 100%
}

.writeinfo {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index 20
}


.writeinfo_warp {
  position: relative;
  width: 80%;
  background-color: blue;
  background: url('http://assets.rurushishi.com/activies/bgyAct/msg.png') repeat center center;
  background-size: 100% 100%;
  padding: 1.2rem 0;
}

.writeinfo_warp >div {
  margin-top: 0.3rem;
}

// .writeinfo_bg {
// position: absolute;
// }

// .writeinfo_bg img {
// width: 100%;
// }
.writeinfo_prizeinfo {
  margin-top: 0rem !important;
  width: 80%;
  margin 0 auto
  text-align: center;
  font-size: 0.28rem;
  color: #ffffff;
}

.writeinfo_tips {
  margin-top: 0.2rem;
  width: 100%;
  text-align: center;
  color: #ffffff;
}

.writeinfo_name {
  margin-top: 0.2rem;
  width: 100%;
  text-align: center;
}

.writeinfo_name input {
  border-radius: 0.3rem;
  width: 80%;
  height: 0.6rem;
  text-indent: 0.3rem;
  border-color: #eee1a9;
}

.writeinfo_mobile {
  margin-top: 0.2rem;
  width: 100%;
  text-align: center;
}

.writeinfo_mobile input {
  border-radius: 0.3rem;
  width: 80%;
  height: 0.6rem;
  text-indent: 0.3rem;
  border-color: #eee1a9;
}

.writeinfo_code {
  width: 80%;
  margin: 0.2rem auto 0 auto;
  display: flex;
}

.writeinfo_code input {
  border-radius: 0.3rem;
  width: 100%;
  height: 0.6rem;
  text-indent: 0.3rem;
  border-color: #eee1a9;
}

.writeinfo_code .writeinfo_code_btn {
  border-radius: 0.3rem;
  min-width: 1rem;
  height: 0.6rem;
  line-height: 0.6rem;
  text-align: center;
  margin-left: 10%;
  background-color: #ffb53b;
  padding: 0 0.1rem;
}

.writeinfo_btns {
  margin-top: 0.2rem;
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
}

.writeinfo_btns .writeinfo_btns_ok {
  width: 30%;
  margin-right 10%;
  height: 0.6rem;
  line-height: 0.6rem;
  background-color: #ffb53b;
  border-radius: 0.3rem;
}
.writeinfo_btns .close{
  width: 30%;
  height: 0.6rem;
  line-height: 0.6rem;
  background-color: #ffb53b;
  border-radius: 0.3rem;
}
</style>


